<template>
    <div class="port">
        <el-dropdown trigger="click" size="medium">
            <div class="avatar">
                <el-avatar shape="circle" :size="40" :src="avatar"></el-avatar>
		    </div>
             <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                    <el-button icon="el-icon-user" type="text" @click="UserInfo  = true">个人信息</el-button>
                </el-dropdown-item>
                <el-dropdown-item @click="openDialog('passwordRef')">
                    <el-button icon="el-icon-edit-outline" type="text" @click="passwordRef">修改密码</el-button>
				</el-dropdown-item>
                <el-dropdown-item divided>
                    <el-button icon="el-icon-switch-button" type="text" @click="logout">退出登录</el-button>
				</el-dropdown-item>
            </el-dropdown-menu>

        </el-dropdown>


        <el-dialog title="个人信息" :visible.sync="UserInfo" width="30%">
            <el-avatar shape="circle" :size="100" :src="avatar"></el-avatar>
            <h1>{{username}}</h1>
            <div><el-tag>管理员</el-tag></div>
        </el-dialog>
    </div>
</template>

<script>
import avatar from "@/assets/images/avatar.gif";
export default {
    data() {
        return {
            avatar : avatar,
            username : "",
            UserInfo : false,
        }
    },
    mounted(){
        this.getdata()
    },
    methods: {
        getdata(){
            this.username = localStorage.getItem("name");
        },        
        logout(){
            this.$confirm("您是否确认退出登录?", "温馨提示", {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                localStorage.setItem("unlogin", true);
                localStorage.setItem("name", "");
				this.$router.push({name:'login'})
				this.$message({showClose: true,message:"退出登录成功！",type: "success"});
            });
        },
        passwordRef(){
            this.$message({showClose: true,message:"暂时无法修改密码",type: "error"});
        }
    },
}
</script>


<style lang="less" scoped>

        
</style>